import React from "react";
import { Modal, Form, Input, Button, Upload, Image } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import Editer from "@/components/editer";

interface PostEditProps {
  open: boolean;
  onClose: () => void;
  onOk: (data: any) => void;
  confirmLoading: boolean;
  post: { ID: number; title: string; content: string; cover: string };
  setPost: (post: any) => void;
  uploadApi: (file: File) => Promise<any>;
}

const PostEdit: React.FC<PostEditProps> = ({
  open,
  onClose,
  onOk,
  confirmLoading,
  post,
  setPost,
  uploadApi,
}) => {
  if (!post) return null;

  return (
    <Modal
      open={open}
      onCancel={onClose}
      onOk={() => onOk(post)}
      confirmLoading={confirmLoading}
      title="编辑文章"
      width="80%"
      centered
      destroyOnClose
    >
      <Form layout="vertical">
        <Form.Item label="封面图片（可选）">
          {post.cover ? (
            <div style={{ marginTop: 8 }}>
              <Image
                src={post.cover}
                alt="封面"
                width={200}
                style={{ borderRadius: 4, border: "1px solid #eee", display: "block" }}
              />
              <Button style={{ marginTop: 8 }} onClick={() => setPost({ ...post, cover: "" })}>
                重新选择
              </Button>
            </div>
          ) : (
            <Upload
              showUploadList={false}
              accept="image/*"
              customRequest={async ({ file, onSuccess, onError }) => {
                try {
                  const realFile = file as File;
                  const res: any = await uploadApi(realFile);
                  if (res.code === 0) {
                    setPost({ ...post, cover: res.data });
                    onSuccess && onSuccess(res, realFile);
                  } else {
                    onError && onError(new Error("上传失败") as Error);
                  }
                } catch (e) {
                  onError && onError(e as Error);
                }
              }}
            >
              <Button icon={<UploadOutlined />}>上传封面</Button>
            </Upload>
          )}
        </Form.Item>
        <Form.Item
          label="标题"
          required
          rules={[
            { required: true, message: "请输入标题" },
            { max: 50, message: "标题不能超过50字" },
          ]}
        >
          <Input
            value={post.title}
            onChange={e => setPost({ ...post, title: e.target.value })}
            placeholder="请输入标题（最多50字）"
            allowClear
          />
        </Form.Item>
        <Form.Item
          label="内容"
          required
          rules={[
            { required: true, message: "请输入内容" },
            {
              validator: (_, value) =>
                value?.replace(/<[^>]+>/g, "").trim().length >= 10
                  ? Promise.resolve()
                  : Promise.reject("内容至少10字"),
            },
          ]}
        >
          <Editer post={post} setPost={setPost} />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default PostEdit; 